<template>
  <div>
    <treeselect 
      v-model="currValue"  
      :max-height="200"
      :options="categoryList"
      :default-expand-level="3"
      @select="onTreeSelect"
      placeholder="请选择商品类目"/>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import Treeselect from '@riophae/vue-treeselect'
  export default {
    components: {
      Treeselect
    },
    props: {
      value: {
        type: [String, Number],
        default: null
      }
    },
    data() {
      return {
        currValue: null
      }
    },
    mounted() {
      this.$store.dispatch("getCategoryList", true)
    },
    methods: {
      onTreeSelect(target) {
        this.$emit('input', target.id)
      }
    },
    computed: {
      ...mapGetters(['categoryList'])
    },
    watch: {
      currValue(value) {
        this.$emit('input', value)
      }
    }
  }
</script>